<template>
    <div class="app-main">
        <myheader title="彩生活" showBackBtn="false"/>

        <!--头部图片和头像-->
        <div class="header">
            <img src="../../assets/images/my_massage.jpg"/>
        </div>

        <!--判断是否注册-->
        <div v-if="registStatus=='2'">
            <div class="line"/>

            <!-- 导航栏 -->
            <mt-tabbar v-model="indexSelectPage">
                <mt-tab-item id="1">
                    <img slot="icon" src="../../assets/images/homePageBlack.jpg">
                    主页
                </mt-tab-item>
                <mt-tab-item id="2">
                    <img slot="icon" src="../../assets/images/my.jpg">
                    我的
                </mt-tab-item>
            </mt-tabbar>

            <!-- 主体 -->
            <mt-tab-container v-model="indexSelectPage">
                <mt-tab-container-item id="1">
                    <div class="main-top" @click="toAccredit">
                        <div><img alt="" src="http://115.29.17.93:80/csh/image/man.jpg"></div>
                        <template v-if="accredit.allAccreditCount=='0'">
                            <div style="color: red;">可购买刷脸版本,点击进行授权</div>
                        </template>
                        <template v-else>
                            <div>授权人员管理</div>
                            <div v-text="accredit.useAccreditCount+'/'+accredit.allAccreditCount+'人'"></div>
                        </template>
                    </div>
                    <div class="main-title">
                        进门记录：
                    </div>
                    <template v-if="records.length==0">
                        <mt-cell title="暂无" class="main-detail"/>
                    </template>
                    <template v-else>
                        <template v-for="record in records">
                            <mt-cell v-if="record.accessType=='0'" :title="record.customerName+' 刷脸回家'"
                                     :label="record.createTime" is-link to="/message" class="main-detail"/>
                            <mt-cell v-if="record.accessType=='1'" :title="record.customerName+' 刷卡回家'"
                                     :label="record.createTime" is-link to="/message" class="main-detail"/>
                        </template>
                    </template>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <mt-cell title="消息设置" is-link>
                        <span><mt-switch v-model="switchValue"/></span>
                        <img slot="icon" src="../../assets/images/my_massage.jpg" width="24" height="24">
                    </mt-cell>
                    <mt-cell title="授权购买" is-link to="/buy">
                        <span><img src="../../assets/images/arrow.jpg" width="24" height="24"></span>
                        <img slot="icon" src="../../assets/images/my_massage.jpg" width="24" height="24">
                    </mt-cell>
                    <mt-cell title="已购服务" is-link to="/accredit">
                        <span><img src="../../assets/images/arrow.jpg" width="24" height="24"></span>
                        <img slot="icon" src="../../assets/images/my_massage.jpg" width="24" height="24">
                    </mt-cell>
                    <mt-cell title="消息记录" is-link to="/message">
                        <span><img src="../../assets/images/arrow.jpg" width="24" height="24"></span>
                        <img slot="icon" src="../../assets/images/my_massage.jpg" width="24" height="24">
                    </mt-cell>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>

        <!--未注册-->
        <div class="index" v-else-if="registStatus=='1'">
            <div>再无丢卡忘带卡烦恼</div>
            <div>刷脸开门更快捷</div>
            <div @click="toRegister">申请刷脸</div>
        </div>
    </div>

</template>


<script>
    import localstore from '../../utils/localstore'
    export default {
        name: 'index',
        data() {
            return {
                isRegist: false,
                switchValue: false,
                code: this.$route.query.code,
                openid: localstore.get("openid"),
                records: [],
                accredit: {
                    freeStatus: "1", allAccreditCount: "0", useAccreditCount: "0"
                }
            };
        },
        methods: {
            toRegister(){
                if (this.registStatus == "1") {
                    this.$inotify.warning("正在审核,请主动联系小区管理员")
                    return
                }
                this.$router.push('register')
            },
            getAccessRecordList(){
                this.$ajax.get("/ccAccessRecordApiController/getAccessRecordList", {
                    customerNo: this.customerNo,
                    pageOffset: 0,
                    pageSize: 3
                }, result => {
                    this.records = result.rows
                })
            },
            getCustomerAccreditInfo(){
                this.$ajax.get("/ccCustomerAccreditApiController/getCustomerAccreditCount", {customerNo: this.customerNo}, result => {
                    this.accredit = result
                    this.$store.commit("setFreeStatus", result.freeStatus)//将小区收费状态保存到状态机中,避免每次都要获取

                })
            },
            toAccredit(){
                if (this.accredit.freeStatus == "0") {
                    this.$router.push("register")
                    return
                }
                if (this.accredit.freeStatus == "1") {
                    this.$router.push("buy")
                    return
                }
            }
        },
        computed: {
            indexSelectPage: {
                get () {
                    return this.$store.state.indexSelectPage
                },
                set (val) {
                    this.$store.commit('setIndexSelectPage', val)
                }
            },
            registStatus: {
                get () {
                    return this.$store.state.registStatus
                },
                set (val) {
                    this.$store.commit('setRegistStatus', val)
                }
            },
            customerNo: {
                get () {
                    return this.$store.state.customerNo
                },
                set (val) {
                    this.$store.commit('setCustomerNo', val)
                }
            },
            refreshIndex: {
                get () {
                    return this.$store.state.refreshIndex
                },
                set (val) {
                    this.$store.commit('setRefreshIndex', val)
                }
            }
        },
        activated(){
            //如果不刷心主页,就不往下执行
            if (this.refreshIndex == true) {
                //如果本地不存在openid,则通过code去获取,如果请求过来没有code,则跳转到对呀的Ouath2首页申请
                if (!this.openid) {
                    if (!this.code) {
                        window.location.href = this.$basePath
                        return
                    } else {
                        this.$ajax.get("/getOpenid", {code: this.code}, response => {
                            let openid = response.openid
                            localstore.put('openid', openid)
                            this.openid = openid
                        })
                    }
                } else {
                    //如果vuex中registStatus是2,就不往下走了
                    this.$ajax.get("/ccCustomerRegistInfoApiController/customerRegistStatus", {openid: this.openid}, (result) => {
                        //将得到的openid存储到vuex中
                        this.customerNo = result.customerNo
                        //检查注册状态
                        this.registStatus = result.registStatus
                        //1为审核中
                        if (this.registStatus == "1") {
                            this.$inotify.warning("正在审核,请主动联系小区管理员")
                        }
                        if (this.registStatus == "2") {
                            this.$inotify.success("恭喜您审核成功!")
                            //获取刷脸记录
                            this.getAccessRecordList();
                            //获取授权记录
                            this.getCustomerAccreditInfo()
                        }
                        this.refreshIndex = false
                    });
                }
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .index {
        text-align: center;
    }

    .index > :nth-child(1) {
        color: deepskyblue;
        font-size: 18px;
        margin-top: 50px;
    }

    .index > :nth-child(2) {
        color: deepskyblue;
        font-size: 18px;
        margin-top: 8px;
    }

    .index > :nth-child(3) {
        color: deepskyblue;
        font-size: 18px;
        margin-top: 8px;
        margin-left: 85px;
        line-height: 260px;
        width: 205px;
        height: 260px;
    }

    .line {
        height: 13px;
        background: #F8F8F8;
    }

    .header {
        height: 110px;
        background: url("../../assets/images/header.jpg");
        background-size: 100%;
        text-align: center;
    }

    .header img {
        margin-top: 15px;
        display: inline;
        width: 80px;
        height: 80px;
        border-radius: 4em;
    }

    .mint-cell {
        min-height: 70px;
    }

    .mint-cell-wrapper {
        padding-left: 15px;
        width: 97%;

    }

    .main-top {
        margin-top: 20px;
        font-size: 15px;
        width: 90%;
        margin-left: 5%;
        border: 1px solid #eee;
        display: flex;
        flex-flow: row;
        justify-content: space-around;
        align-items: center;
        padding: 5px;
    }

    .main-top :nth-child(2) {
        flex: 2;
        margin-left: 25px;
    }

    .main-title {
        margin-top: 30px;
        margin-left: 20px;
        font-weight: bold;
        font-size: 18px;
    }

    .main-detail {
        padding-left: 20px;
        width: 96%;
        left: 2%;
        margin-top: 15px;
    }

    .main-detail .mint-cell-label {
        margin-top: 20px;
    }

    .mint-cell {
        border-bottom: 1px solid #ddd;
    }
</style>
